
import React, { Suspense } from 'react'
import { Routes, Route, Navigate } from 'react-router-dom'
import Layout from '@/Layout'
import Login from '@p/Login'
import NotFound from '@p/NotFound'
import NoAuth from '@p/NoAuth'
import routes from './routes'
import { Spin  } from 'antd'
import { isLogin } from '@/utils'
import { useSelector } from 'react-redux'
 export default function AuthRooutes() {
  const role = useSelector(state => state.user.role);
  
  return (
    <Suspense fallback={
      <div style={{height: '100vh',display: 'flex', justifyContent: 'center', alignItems:'center'}}>
        <Spin tip="Loading"/>
      </div>
    }>
      <Routes>
        <Route path="/" element={isLogin()?<Layout/>:<Navigate to="/login"/>}>
       
          {
            routes.map(route => (
              <Route 
                key={route.path}
                path={route.path}
                element={
                  (route.roles.includes('*')||route.roles.includes(role))
                  ?
                  <route.component/>
                  :
                  <Navigate to="/noauth"/>
                }/>
            ))
          }
          <Route path="/" element={ <Navigate to="/dashBoard" replace/> }/>
        </Route>
        <Route path="/login" element={<Login/>}></Route>
        <Route path="/noauth" element={<NoAuth/>}></Route>
        <Route path="*" element={<NotFound/>}></Route>
      </Routes>
    </Suspense>
  )
}
